<template>
  <div class="custom-radio-group" :style="groupStyle">
    <label 
      class="custom-radio"
      v-for="(option, index) in options" 
      :key="index"
      :style="radioContainerStyle"
    >
      <!-- 单选框按钮 -->
      <span 
        class="radio-button"
        :style="[
          baseRadioStyle,
          { 
            width: size + 'px',
            height: size + 'px',
            backgroundColor: isChecked(option.value) ? checkedColor : uncheckedColor,
            borderColor: isChecked(option.value) ? checkedColor : borderColor
          }
        ]"
      >
        <!-- 选中状态的对勾 -->
        <svg 
          v-if="isChecked(option.value)" 
          :width="size * 0.6" 
          :height="size * 0.6" 
          viewBox="0 0 10 10"
          :style="{ display: 'block' }"
        >
          <path 
            d="M2.5 5 L4.5 7 L8 3.5" 
            stroke="white" 
            stroke-width="2" 
            stroke-linecap="round" 
            stroke-linejoin="round" 
            fill="none"
          />
        </svg>
      </span>
      
      <!-- 单选框文本 -->
      <span 
        class="radio-label"
        :style="{ 
          marginLeft: labelMargin + 'px',
          fontSize: labelFontSize + 'px'
        }"
      >
        {{ option.label }}
      </span>
      
      <!-- 原生单选框（隐藏但保持功能） -->
      <input 
        type="radio" 
        :name="name"
        :value="option.value"
        v-model="selectedValue"
        class="native-radio"
        @change="$emit('change', selectedValue)"
      >
    </label>
  </div>
</template>

<script>
export default {
  name: 'CustomRadio',
  props: {
    // 选项列表，格式: [{ label: '文本', value: '值' }]
    options: {
      type: Array,
      required: true,
      validator: (value) => {
        return value.every(item => item.hasOwnProperty('label') && item.hasOwnProperty('value'));
      }
    },
    // 绑定的值
    value: {
      type: [String, Number, Boolean],
      required: true
    },
    // 单选框组名称
    name: {
      type: String,
      default: 'custom-radio-group'
    },
    // 单选框大小（像素）
    size: {
      type: Number,
      default: 20,
      validator: (value) => value > 10 && value < 50
    },
    // 选中时的背景颜色
    checkedColor: {
      type: String,
      default: '#4285f4'
    },
    // 未选中时的背景颜色
    uncheckedColor: {
      type: String,
      default: '#ffffff'
    },
    // 边框颜色
    borderColor: {
      type: String,
      default: '#dcdfe6'
    },
    // 标签与单选框的间距
    labelMargin: {
      type: Number,
      default: 8
    },
    // 标签字体大小
    labelFontSize: {
      type: Number,
      default: 14
    },
    // 选项之间的间距
    spacing: {
      type: Number,
      default: 16
    }
  },
  computed: {
    // 双向绑定值
    selectedValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    },
    // 单选框组样式
    groupStyle() {
      return {
        display: 'flex',
        gap: this.spacing + 'px',
        flexWrap: 'wrap'
      };
    },
    // 单选框容器样式
    radioContainerStyle() {
      return {
        display: 'flex',
        alignItems: 'center',
        cursor: 'pointer'
      };
    },
    // 单选框基础样式
    baseRadioStyle() {
      return {
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: '50%',
        border: '1px solid',
        transition: 'all 0.2s ease',
        boxSizing: 'border-box'
      };
    }
  },
  methods: {
    // 判断选项是否被选中
    isChecked(value) {
      return this.selectedValue === value;
    }
  }
};
</script>

<style scoped>
/* 隐藏原生单选框但保持其功能 */
.native-radio {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* 标签样式增强 */
.radio-label {
  user-select: none;
}

/* 悬停效果 */
.custom-radio:hover .radio-button {
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}
</style>
